// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import router from './router'
import IEcharts from 'vue-echarts-v3';
import iview from 'iview'
import vueRouter from 'vue-router'
import vuex from 'vuex'
import 'iview/dist/styles/iview.css'
import store from './store/store.js'

Vue.use(iview);
Vue.use(vueRouter);

Vue.config.productionTip = false;

/* eslint-disable no-new */

// import categoryOne1 from './components/categoryOne1.vue'
// import categoryOne2 from './components/categoryOne2.vue'
// import categoryOne3 from './components/categoryOne3.vue'
// import categoryOne4 from './components/categoryOne4.vue'

var router = new vueRouter({
  routes: [
    // {path: '/', redirect: ""},
    // {path: '/categoryOne1', component: categoryOne1},
    // {path: '/categoryOne2', component: categoryOne2},
    // {path: '/categoryOne3', component: categoryOne3},
    // {path: '/categoryOne4', component: categoryOne4}
  ]
});

Vue.directive('drag', {
  inserted: function(el) {
    var l, t;
    var containerWidth = document.getElementById('container').offsetWidth;
    // console.log(containerWidth);
    var containerHeight = document.getElementById('container').offsetHeight;
    // console.log(containerHeight);
    el.onmousedown = function(ev) {
      var disX = ev.clientX - el.offsetLeft;
      var disY = ev.clientY - el.offsetTop;
      document.onmousemove = function(ev) {
        l = ev.clientX - disX;
        // console.log(ev.clientX);

        t = ev.clientY - disY;
        // console.log(ev.clientY);
        el.style.transition = "none";
        el.style.transition = "none";
        el.style.left = l + 'px';
        el.style.top = t + 'px';

      };
      document.onmouseup = function() {

        //限定图表拖动的范围
        var targetWidth = Math.floor(l / 20) * 20; //吸附效果

        if (targetWidth <= 0) {
          targetWidth = 0;

        };
        if (targetWidth >= containerWidth - el.offsetWidth) {
          targetWidth = containerWidth - el.offsetWidth;
        };

        var targetHeight = Math.floor(t / 20) * 20; //吸附效果
        if (targetHeight <= 0) {
          targetHeight = 0;
        };
        if (targetHeight >= containerHeight - el.offsetHeight) {
          targetHeight = containerHeight - el.offsetHeight;
        };

        el.style.transition = "top .1s";
        el.style.transition = "left .1s";
        el.style.left = targetWidth + 'px';
        el.style.top = targetHeight + 'px';

        document.onmousemove = null;
        document.onmouseup = null;

      };
    };
  }

})

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },

})
